<template>
  <el-radio-group v-model="radio" type="vertical" @change="redioChange">
    <el-radio label="1"> 通配符* </el-radio>
    <el-radio label="2"> 不指定 </el-radio>
    <el-radio label="3"
      >周期从 <el-input-number v-model="startNum" class="mx-4" :min="1" :max="7" controls-position="right" @change="redioChange" /> -
      <el-input-number v-model="endNum" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange" /> 周
    </el-radio>
    <el-radio label="4"
      >第 <el-input-number v-model="startWeek" class="mx-4" :min="1" :max="7" controls-position="right" @change="redioChange" /> 周的星期<el-input-number
        v-model="everyWeek"
        class="mx-4"
        :min="1"
        :max="10"
        controls-position="right"
        @change="redioChange"
      />
    </el-radio>
    <el-radio label="5">本月最后一个星期</el-radio>
    <el-radio label="6">指定 </el-radio>

    <div style="margin-left: 40px">
      <el-checkbox-group v-model="checkList" class="checkGroup" size="small" @change="redioChange">
        <el-checkbox label="1" />
        <el-checkbox label="2" />
        <el-checkbox label="3" />
        <el-checkbox label="4" />
        <el-checkbox label="5" />
        <el-checkbox label="6" />
        <el-checkbox label="7" />
      </el-checkbox-group>
    </div>
  </el-radio-group>
</template>

<script lang="ts" setup>
const radio = ref('2')
const week = ref('?')
const startNum = ref(1)
const endNum = ref(1)
const startWeek = ref(1)
const everyWeek = ref(1)
const checkList = ref([])
const emit = defineEmits(['update:week'])
let props = defineProps(['weekValue'])
const redioChange = () => {
  week.value = ''
  switch (radio.value) {
    case '1':
      week.value = '*'
      break
    case '2':
      week.value = '?'
      break
    case '3':
      week.value = startNum.value + '-' + endNum.value
      break
    case '4':
      week.value = startWeek.value + '#' + everyWeek.value
      break
    case '5':
      week.value = 'L'
      break
    case '6':
      if (checkList.value.length == 0) {
        week.value = '*'
      } else {
        week.value = checkList.value.join(',')
      }
      break
    default:
      break
  }
  emit('update:week', week)
}
watch(props, () => {
  if (props.weekValue) {
    if (props.weekValue.indexOf('-') != -1) {
      radio.value = '3'
      startNum.value = parseInt(props.weekValue.split('-')[0])
      endNum.value = parseInt(props.weekValue.split('-')[1])
    } else if (props.weekValue.indexOf('#') != -1) {
      radio.value = '4'
      startWeek.value = parseInt(props.weekValue.split('#')[0])
      everyWeek.value = parseInt(props.weekValue.split('#')[1])
    } else if (props.weekValue == 'L') {
      radio.value = '5'
    } else if (props.weekValue == '?') {
      radio.value = '2'
    } else {
      radio.value = '1'
    }
  }
})
</script>
<style lang="scss" scoped>
.el-radio-group {
  display: grid;
  flex-direction: column;
  margin: 0px;
}
.el-radio {
  margin: 6px;
  padding: 6px;
}
.checkGroup {
  margin: 8px;
}
</style>
